<template>
  <div class="allchat">
      <div class="header">
          <van-nav-bar
            title="小郑"
            left-text=""
            left-arrow
            @click-left="onClickLeft"
            />      
      </div>
      <div class="content">
          <div class="chat">
            <div class="chat-main">
              <div class="chat-ls" v-for="(item,index) in messages" :key="index">
                <div class="chat-time" v-if="item.time !=''">{{changeTime(item.time)}}</div>
                <div class="msg-m msg-left" v-if="item.id !='b'">
                  <img :src="item.imgurl" alt="" class="user-img">
                  <div class="message" v-if="item.types ==0">

                    <span class="msg-text">{{item.message}}</span>
                  </div>
                  <div class="message" v-if="item.types ==1">
                    <img :src="item.message" alt="" class="msg-img">
              
                  </div>
                </div>
                <div class="msg-m msg-right" v-if="item.id =='b'">
                  <img :src="item.imgurl" alt="" class="user-img">
                  <div class="message" v-if="item.types == 0">

                    <span class="msg-text">{{item.message}}</span>
                  </div>
                  <div class="message" v-if="item.types == 1">
                    <img :src="item.message" alt="" class="msg-img">
              
                  </div>
                </div>
              </div>
            </div>
            </div>
      </div>
      <div class="bottom">
         <van-cell-group>
  <van-field
    v-model="newmessage"
    ref="getmsg"
    placeholder="请输入..."
    class="field"
  >
    <template #button>
    <van-button size="small" type="primary" @click="getValue">发送</van-button>
  </template>

  </van-field>
  
</van-cell-group>
      </div>
  </div>
</template>

<script>
const messages = this.messages
// import { ImagePreview } from 'vant';
export default {
  data(){
    return {
      messages:[
        {
          id: "a",
          imgurl: "touxiang.jpg",
          message: "你好",
          types: "0", //内容类型（0文字，1图片，2音频）
          time: new Date() - 1000, //发送时间
          tip:0,
        },
        {
          id: "b",
          imgurl: "touxiang1.jpg",
          message: "你好呀",
          types: "0", //内容类型（0文字，1图片，2音频）
          time: new Date(), //发送时间
          tip:1,
        },
        {
          id: "b",
          imgurl: "touxiang1.jpg",
          message: "请问你分享的考研课程能分享给我一份嘛",
          types: "0", //内容类型（0文字，1图片，2音频）
          time: new Date() - 1000*60, //发送时间
          tip:2,
        },
        {
          id: "a",
          imgurl: "touxiang.jpg",
          message: "好的，不过我的文件存在百度云的，方便加一下百度云好友吗",
          types: "0", //内容类型（0文字，1图片，2音频）
          time: new Date() - 1000*60*4, //发送时间
          tip:3,
        },
        {
          id: "b",
          imgurl: "touxiang1.jpg",
          message: "好的，我加你吧",
          types: "0", //内容类型（0文字，1图片，2音频）
          time: new Date() - 1000*60*12, //发送时间
          tip:4,
        },
        {
          id: "a",
          imgurl: "touxiang.jpg",
          message: "那你加一下吧152xxxx4552",
          types: "0", //内容类型（0文字，1图片，2音频）
          time: new Date() - 1000*60*4, //发送时间
          tip:5,
        },
        {
          id: "b",
          imgurl: "touxiang1.jpg",
          message: "谢啦，我去加一下",
          types: "0", //内容类型（0文字，1图片，2音频）
          time: new Date() - 1000*60*4, //发送时间
          tip:5,
        },
        {
          id: "a",
          imgurl: "touxiang.jpg",
          message: "没事，祝你成功上岸",
          types: "0", //内容类型（0文字，1图片，2音频）
          time: new Date() - 1000*60*4, //发送时间
          tip:5,
        },
      ],
      time: "",
      oldTime: new Date(),
      value: "",
      newmessage:'',
    };
  },
  created(){
    this.getMsg();
  },
    methods: {
    onClickLeft() {
      history.go(-1);
    },
     getValue() {
      this.newmessage = this.$refs.getmsg.value;

      this.messages.push({
         id: "b",
        message: this.newmessage,
        imgurl: require("../assets/img/touxiang1.jpg"),
        types: "0",
        time: new Date(),
      });
      console.log(this.messages);
      this.newmessage = " ";
     
    },
    //获取聊天数据
    getMsg(){
      let msg = this.messages;
      for (let i = 0; i < msg.length; i++) {
        msg[i].imgurl = require("../assets/img/" + msg[i].imgurl);

        //时间间隔
        if (i < msg.length - 1) {
          let t = this.spaceTime(this.oldTime, msg[i].time);
          console.log(t);
          if (t) {
            this.oldTime = t;
          }
          msg[i].time = t;
        }

        //补充图片地址
        if (msg[i].types == 1) {
          msg[i].message = require("../assets/img/" + msg[i].message);
        }

        //  this.messages.unshift(msg[i]);
      }
      // messages.sort(sortTip);
      // console.log(arr);

      console.log(this.messages);
    },
    //处理时间
    changeTime(data){
    let old = new Date(data);
    let now = new Date();
    //获取old具体时间
    let d = old.getTime();
    let h = old.getHours();
    let m = old.getMinutes();
    let Y = old.getFullYear();
    let M = old.getMonth();
    let D = old.getDate();
    //获取now具体时间
    let nd = now.getTime();
    let nh = now.getHours();
    let n = now.getMinutes();
    let nY = now.getFullYear();
    let nM = now.getMonth();
    let nD = now.getDate();

    //当天的时间
    if(D === nD && M ===nM && Y === nY){
      if(h<10){
        h = '0'+h;
      }
      if(m<10){
        m = '0'+m;
      }
      return h+':'+m;
    }

    //昨天时间
    if(D+1 === nD && M ===nM && Y === nY){
      if(h<10){
        h = '0'+h;
      }
      if(m<10){
        m = '0'+m;
      }
      return '昨天'+h+':'+m;
    }else if(Y === nY){
      //今年
      if(h<10){
        h = '0'+h;
      }
      if(m<10){
        m = '0'+m;
      }
      return M+'月'+D+'日 '+h+':'+m;
    }else{
      //大于今年
      if(h<10){
        h = '0'+h;
      }
      if(m<10){
        m = '0'+m;
      }
      return Y+'年'+M+'月'+D+'日 '+h+':'+m;
    }
  },

  //间隔时间差
    spaceTime(old,now){
      old = new Date(old);
      now = new Date(now);

      var told = old.getTime();
      var tnow = now.getTime();
      //五分钟显示一次
      if(told>(tnow+1000*60*5)){
        return now;
      }else{
        return '';
      }
    },
    sortTip() {
      return b.tip - a.tip;
    },
   
  },
};
</script>

<style>
body {
   background: rgba(244, 244, 244, 0.96);
}
.header{
  z-index: 999;
  position: fixed;
  top: 0;
  width: 100%;
}
.content{
  padding-top: 15px;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden; 
    /* background: rgba(244, 244, 244, 0.96); */
}
.chat{
  height: 100%;
}
.chat .chat-main{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 30px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  
}
.chat .chat-ls .chat-time{
  font-size: 15px;
  line-height: 20px;
  padding: 10px 0;
  text-align: center;
}
.msg-m{
  /* display: inline-block; */
  display: flex;
  padding: 10px 0;
}
.chat .user-img{
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.message{
  flex: none;
  /* max-width: 200px; */
}
.msg-text{
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  padding: 8px 4px;
  max-width: 280px;
  word-break: normal;
  white-space: pre-wrap;
  text-align: left;
  word-wrap: break-word;
}
.msg-left{
  /* display: inline-block; */
  flex-direction: row;
  float: left;
  white-space: nowrap;
}
.msg-left .msg-text{
  display: inline-block;
  margin-left: 8px;
  background: #fff;
  border-radius: 20px 20px 20px 0px;
}
.msg-right{
  /* display: inline-block; */
  flex-direction: row-reverse;
  float: right;
  white-space: nowrap;

}
.msg-right .msg-text{
  margin-right: 8px;
  background-color: lightpink;
  border-radius: 20px 20px 0px 20px;
}
.msg-img{
  max-width: 200px;
  border-radius: 20px;
  padding: 10px;
}
.bottom{
  z-index: 999;
  position: fixed;
  width: 100%;
  
  bottom: 0;
}
.van-cell{
  width: 100%;
  height: 50px;
}
.van-field__control{
  position: relative;
  right: -4px;
  border: 1px solid #c0c0c0;
  border-radius: 16px;
}
.van-button--primary{
  position: relative;
  right: -5px;
  width: 60px;
  background-color: lightpink;
  border: 1px solid lightpink;
  border-radius: 10px;
}
.van-icon-photo-o::before {
  font-size: 25px;
}
.van-icon::before{
  color: lightpink;
}
</style>